import React from "react";
import Link from "next/link";
import { useRouter } from "next/router";
interface Breadcrumb {
  path: string;
  name: string;
}

const Breadcrumbs: React.FC = () => {
  const router = useRouter();
  function pathToBreadcrumbs(path: string): Breadcrumb[] {
    const parts = path.split("/").filter(Boolean); // Исключаем пустые строки
    const breadcrumbs: Breadcrumb[] = [{ path: "/", name: "Главная" }]; // Начинаем с главной

    let currentPath = "";
    parts.forEach((part) => {
      currentPath += `/${part}`;
      // Здесь можно добавить логику перевода пути в название, например через словарь или API
      const name = part.charAt(0).toUpperCase() + part.slice(1); // Простая заглушка для названия
      breadcrumbs.push({ path: currentPath, name });
    });

    return breadcrumbs;
  }
  const breadcrumbs = pathToBreadcrumbs(router.pathname);

  return (
    <div className="flex items-center pt-5">
      {breadcrumbs.map((breadcrumb, index) => (
        <React.Fragment key={index}>
          <Link href={breadcrumb.path}>
            <h5
              className={`text-h5 text-light text-black ${
                index === breadcrumbs.length - 1 ? "font-bold" : ""
              }`}
            >
              {breadcrumb.name}
            </h5>
          </Link>
          {index < breadcrumbs.length - 1 && <span className="mx-2">/</span>}
        </React.Fragment>
      ))}
    </div>
  );
};

export default React.memo(Breadcrumbs);
